// users.js
export const userManagementContent = `  
  <div class="container">
  
  <!-- 搜索功能 -->
  <div class="search-box">
    <input type="text" id="searchInput" placeholder="输入关键字搜索..." style="width: 300px; padding: 10px;">
    <button onclick="searchData()">搜索</button>
    <button onclick="openAddModel()">添加</button>

  </div>

  <!-- 数据列表 -->
  <h2>数据列表</h2>
  <table id="dataTable">
    <thead>
    <tr>
      <th>ID</th>
      <th>姓名</th>
      <th>邮箱</th>
      <th>年龄</th>
      <th>性别</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody id="tableBody">
    <!-- 数据将通过JavaScript动态加载 -->
    </tbody>
  </table>
</div>
<!-- 添加数据表单 -->
<div class="form-container">

</div>
<!-- 编辑模态框 -->
<div id="editModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2>编辑数据</h2>
    <input type="hidden" id="editId">
    <div class="form-group">
      <label for="editName">姓名:</label>
      <input type="text" id="editName" required>
    </div>
    <div class="form-group">
      <label for="editEmail">邮箱:</label>
      <input type="email" id="editEmail" required>
    </div>
    <div class="form-group">
      <label for="editAge">年龄:</label>
      <input type="number" id="editAge" min="0" required>
    </div>
    <div class="form-group">
      <label for="editGender">性别:</label>
      <select id="editGender">
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="其他">其他</option>
      </select>
    </div>
    <button class="edit" >更新</button>
    <button onclick="closeModal()">取消</button>
  </div>
</div>
<!--添加模态框-->
<div id="addModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">&times;</span>
    <h2>添加新数据</h2>
    <div class="form-group">
      <label for="name">姓名:</label>
      <input type="text" id="name" required>
    </div>
    <div class="form-group">
      <label for="email">邮箱:</label>
      <input type="email" id="email" required>
    </div>
    <div class="form-group">
      <label for="age">年龄:</label>
      <input type="number" id="age" min="0" required>
    </div>
    <div class="form-group">
      <label for="gender">性别:</label>
      <select id="gender">
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="其他">其他</option>
      </select>
    </div>
    <button onclick="addData()">添加</button>
    <button onclick="clearForm()">清空</button>

  </div>
</div>
`;

